<page-header [title]="l('Roles')"></page-header>


<nz-card [nzExtra]="extraTpl">

  <ng-template #extraTpl>
    <button nz-button (click)="refresh()" nzShape="circle">
      <i class="anticon anticon-reload"></i>
    </button>
    <button nz-button (click)="create()" nzShape="circle" nzType="primary">
      <i class="anticon anticon-plus"></i>
    </button>
  </ng-template>


  <nz-table #ajaxTable nzShowSizeChanger [nzData]="dataList" [nzTotal]="totalItems" [(nzPageIndex)]="pageNumber" [(nzPageSize)]="pageSize"
    [nzLoading]="isTableLoading" (nzPageIndexChange)="refresh()" (nzPageSizeChange)="refresh()" [nzFrontPagination]="false">
    <thead>
      <tr>
        <th>{{l("RoleName")}}</th>
        <th>{{l("DisplayName")}}</th>
        <th>{{l("Actions")}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of ajaxTable.data">
        <td>{{item.name}}</td>
        <td>{{item.displayName}}</td>
        <td>
          <a (click)="edit(item)">编辑</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a (click)="delete(item)">删除</a>
        </td>
      </tr>
    </tbody>
  </nz-table>

</nz-card>
